<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>messageWall</title>
</head>
<body>
    <style>
        *{
            margin:0;
            padding: 0;
            box-sizing: border-box;
        }

        .container{
            width: 100%;
        }

        h3{
            text-align: center;
            padding: 30px 0;
            font-size: 24px;
        }

        p{
            text-align: center;
            color: #999;
            padding: 10px 0;
        }

        .row{
            width: 400px;
            height: 50px;
            margin: 0 auto;
            
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .row span{
            width: 60px;
            font-size: 20px;
        }

        .row input{
            width: 300px;
            height: 40px;
            line-height: 40px;
            font-size: 20px;
            text-indent: 0.5em;
            outline:none;
        }

        .row #submit{
            width: 300px;
            height: 40px;
            font-size: 20px;
            line-height: 40px;
            margin: 0 auto;

            color: white;
            background-color: orange;
            border: none;

            border-radius: 10px;
        }

        .row #submit:active{
            background-color: gray;
        }
    </style>
    <div class="container">
        <h3>表白墙</h3>
        <p>输入后点击提交 会将信息显示在表格中</p>
        <div class="row">
            <span>谁：</span>
            <input type="text">
        </div>
        <div class="row">
            <span>对谁：</span>
            <input type="text">
        </div>
        <div class="row">
            <span>说:</span>
            <input type="text">
        </div>
        <div class="row">
            <button id="submit">提交</button>
        </div>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script>

        function getMessages(){
            $.ajax({
                type:"get",
                url:"message",
                success:function(body){
                    let container = document.querySelector('.container');
                    for(let message of body){
                        let div = document.createElement('div');
                        div.innerHTML = message.from + '对' + message.to + '说:' + message.message;
                        div.className = 'row';
                        container.appendChild(div);
                    }
                }
            });
        }

        getMessages();
        let submitBtn = document.querySelector('#submit');
        submitBtn.onclick = function(){
            let inputs = document.querySelectorAll('input');
            let from = inputs[0].value;
            let to = inputs[1].value;
            let msg = inputs[2].value;
            if(from == '' || to  == '' || msg == ''){
                return ;
            }
            let div = document.createElement('div');
            div.innerHTML = from  + '对' + to + '说' + msg;
            div.className = 'row';
            let container = document.querySelector('.container');
            container.appendChild(div);
            for(let i = 0;i < inputs.length; i++){
                inputs[i].value = '';
            }

            let body = {
                "from":from,
                "to":to,
                "message":msg
            };

            $.ajax({
                type:"post",
                url:'message',
                contentType:"application/json;charser=utf8",
                data:JSON.stringify(body),
                success:function(){
                    alert("消息提交成功");
                },
                error:function(){
                    alert("消息提交失败");
                }
            });
        }
    </script>
</body>
</html>